<template>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目"  v-model.trim="subject"/> <!-- 双向绑定 去空格 -->
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score" @keyup.enter="addFn(subject,score)" />  <!-- 双向绑定，键盘事件 -->
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit"  @click="addFn(subject,score)">添加</button> 
        </div>
      </div>
    </div>
 
</template>

<script>
export default {
    data(){
      return {
      subject: '',
      score: ''
      }
    },
    methods:{
      addFn(subject,score){
        this.$emit('addFn',subject,score)  //子传父，触发自定义事件，将学科分数 传给父组件
        this.subject=''
        this.score=''
      }
    }
}
</script>

<style>

</style>